<template>
	<view>
		<uv-navbar autoBack title="" bg-color="rgba(255,255,255,0)" titleStyle="font-size:0">

		</uv-navbar>
		
			<view class="header">
			    <view class="justify-between headerSearch align-center">
			     <view class="city align-center" @click="open" v-if="areaList.length">
			         {{ areaList[areaFocus].name}} <uv-icon name="arrow-down-fill" size="8" color="rgba(68, 68, 68, 1)"></uv-icon>
			       </view>
			       <text class="mlr10 line"></text>
			        <input type="text" class="flex1" placeholder="请输入关键词搜索" />
			        <uv-icon color="#000" size="28" name="search"></uv-icon>
			    </view>
			</view>
			<view class="bgWhite justify-between plr15 ptb15 ft14" style="color: #333333;">
				<view class="align-center">
					签约门店 <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center">
					年龄 <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center">
					学历 <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center">
					段位 <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
			</view>
			<view class="plr15">
			<view class=" justify-between flex-wrap ">
				<view class="peopleInfo" v-for="(item,index) in gyList " :key="index" @click="toMain(item)">
					<image style="width: 340rpx;height: 370rpx;border-radius: 15rpx ;" src="$domain.api+item.img_url"
						mode=""></image>
					<view class=" peopleTag ">
						<view class="taginfo">
							<image src="/static/images/index/i2.png" mode="widthFix"
								style="width: 20rpx;margin-right: 4rpx;"></image>
							台球宝贝
						</view>
						<view class="tagStatus">
							<text class="point"></text>
							空闲
						</view>
					</view>
					<view class="peoplename justify-between">
						{{item.name}}
						<view class="align-center">4.9 <uv-icon size="14" color="#fff" name="star-fill"></uv-icon>
						</view>
					</view>

				</view>

				<view class="" v-if="gyList.length==0">
					<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
				</view>
			</view>
		</view>
		<uv-picker ref="picker" :columns="car_brand" @change="cartypeChange" keyName="name"
			@confirm="confirm"></uv-picker>
		<uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
			@confirm="areaConfirm"></uv-picker>
			<uv-picker ref="picker" :columns="[areaList]"  keyName="name" @confirm="confirm"></uv-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '台球宝贝'
				}, {
					name: '明星助教'
				}, ],
				imgList: [],
				headerList: [],
				car_brand: [
					[],
					[]
				],
				areaRrand: [
					[],
					[]
				],
				areatype: 0,
				text: [],
				orderList: [],
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,

				AreaData: [],
				carColumnData: [],
				columnData: [],
				car_type: "",
				total_cart: 0,
				cateList: [],

				gyList: [{
						name: '姓名',
						image: ""
					},
					{
						name: '姓名',
						image: ""
					}
				],
				yhList: [],
				orderList: [],
				lineBg: require('@/static/images/index/i1.png'),
				areaList:[],
				areaFocus:0
			}
		},
		onLoad() {
			// this.getIndex()
			// this.getOrder()
			// this.getAreaList()
			// this.getCate()
			this.getArea()
	
		},
		// onShareAppMessage: function() {
		// 	let that = this;
		// 	wx.showShareMenu({
		// 		withShareTicket: true,
		// 		menus: ['shareAppMessage', 'shareTimeline']
		// 	});
		// 	return {
		// 		title: '莲通万户',
		// 		imageUrl: '',
		// 		path: '/pages/tabbar/index'
		// 	};
		// },
		// onShareTimeline: function() {
		// 	let that = this;
		// 	return {
		// 		title: '莲通万户',
		// 		imageUrl: '',


		// 	};
		// },
		methods: {
			async getArea(){
			let arealist = await  this.$api.getArea()
			console.log(arealist)
			this.areaList =arealist.data
			
			this.getList()
			},
			confirm(e){
			  console.log(e)  
			  this.areaFocus=e.indexs[0]
			  this.gyList=[]
			  this.page=1
			  this.getList()
			},
			open(){
			    this.$refs.picker.open()
			},
			click(e) {
				console.log(e)
			},
			toUserList() {
				uni.navigateTo({
					url: '/pages/artist/index'
				})
			},
			toAct() {
				uni.navigateTo({
					url: '/pages/activity/index'
				})
			},
			toBooking() {
				uni.switchTab({
					url: '/pages/tabbar/chat'
				})
			},
			toApply() {
				uni.navigateTo({
					url: '/pages/artApply/index'
				})
			},
			async getCate() {
				const {
					data,
					code
				} = await this.$api.CategoryList()
				uni.hideLoading()
				if (code == 200) {
					this.list = data
					// this.categoryId =data[0].id

					// this.getList()
				}
			},
			async getList() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 1
				})
				console.log(code, data)
				if (code == 200) {
					// this.gyList = data
				}
			},
			async getList1() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 2
				})
				console.log(code, data)
				if (code == 200) {
					this.yhList = data
				}
			},
			async getList2() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 3
				})
				console.log(code, data)
				if (code == 200) {
					this.orderList = data
				}
			},

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item) {
				uni.navigateTo({
					url: '/pages/actMain/index?id=' + item.id
				})
			},
			toArtCate(index) {
				uni.navigateTo({
					url: '/pages/activity/index?index=' + index
				})
			},
			change(data) {
				uni.navigateTo({
					url: '/pages/addressMain/index?id=' + data
				})
			}
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 99;
	}

	.formBox {
		position: relative;
		margin: 30rpx 0;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

	}

	.formBox::before {
		position: absolute;
	}

	.bggray6 {
		border-radius: 5rpx;
		align-items: center;
		flex: 1;
		padding: 14rpx 17rpx 20rpx;
		// background-color: #F4F6F8;
		border-bottom: 1rpx solid #E4E4E4;
		font-size: 30rpx;
		color: #555;

		.send {
			width: 32rpx;
			height: 32rpx;
			padding: 4rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #277CC0;
			border-radius: 50%;
			font-size: 20rpx;
			margin-right: 11rpx;
		}

		view {
			flex: 1;
		}

		margin-bottom: 14rpx;
	}

	.right {
		margin-left: 17rpx;
	}

	.cartype {
		image {
			width: 34rpx;
			margin-right: 11rpx;
		}

		view {
			flex: 1;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}
	}

	.submit {
		background: #F24611;
		border-radius: 5rpx;
		color: #fff;

		text-align: center;
		font-size: 25rpx;
		line-height: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}

	.chat {
		background-color: #277CC0;
		border-radius: 5rpx;
		line-height: 60rpx;
		height: 60rpx;
		color: #fff;
		display: flex;
		font-size: 25rpx;

		justify-content: center;
		align-items: center;

		image {
			width: 36rpx;
			margin-right: 12rpx;
		}
	}

	.moduleTitle {

		font-weight: 500;
		font-size: 36rpx;
		color: #3D3D3D;
		margin: 30rpx auto;
		margin-left: 20rpx;
		text-align: center;
		font-weight: bold;
		position: relative;

		text {


			position: relative;
			z-index: 99;
		}
	}

	.moduleTitle::before {
		position: absolute;
		left: -10rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		clear: both;
		content: '';
		z-index: 9;
		width: 8rpx;
		height: 29rpx;
		background: #01C588;
		border-radius: 4rpx;



	}


	.orderItem {
		font-size: 24rpx;
		color: #666;

		image {
			width: 205rpx;
			height: 205rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;

		}

		.orderright {
			width: 376rpx;

			.orderName {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C1C1C;
			}

			.price {
				color: #2CC6A1;
				font-size: 26rpx;
			}
		}

		.apply {
			width: 132rpx;
			height: 54rpx;
			background: #2CC6A1;
			border-radius: 60rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.noticeSwiper {

		height: 63rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9, 2, 4, 0.03);
		border-radius: 12rpx;
		padding: 0 24rpx;
		color: #555555;

		text {
			margin: 0 8rpx;
		}
	}

	.noticeSwiper .swiper-item {
		height: 100%;
	}

	.swiper {
		image {
			height: 300rpx;
			width: 688rpx;
			border-radius: 12rpx;
		}
	}

	.menuBox {
		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}

		.menu {
			background-size: 100% 100%;
			background-position: center;
			width: 330rpx;
			height: 150rpx;
			font-weight: 500;
			padding-left: 38rpx;
			font-size: 28rpx;
			margin-top: 32rpx;
		}


	}

	.dataitem {
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 48rpx;
		margin-right: 106rpx;

		image {
			width: 70rpx;
			margin-bottom: 20rpx;

		}
	}

	.gridItem {
		image {
			width: 221rpx;
			height: 140rpx;

		}

		font-size: 30rpx;
		color: #222222;
	}
</style>
<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
</style>